
<script src="js/jquery.iframe-post-form.js" type="text/javascript"></script>
<style type="text/css">
.body {
}

#boxcenter{
	height: auto;
	width: 760px;
	background-color: #444041;
}
body,td,th {
	color: #FFF;
}
</style>
<table width="100%" border="0" cellpadding="1" cellspacing="1">
  
  <tr class="txt_td">
    <!--th width="12%" height="25"  background="images/img/had.png">รหัสชั้นเรียน</th-->
    <th width="18%" height="25"  background="images/img/had.png">วิชาที่เปิดสอน</th>
    <th width="10%" height="25"  background="images/img/had.png">จัดการสั่งงาน</th>
  </tr>
<?php
   $sql_m = "select * from tb_sec NATURAL JOIN tb_subject WHERE teacher_id='{$_SESSION['sess_userid']}' ORDER BY sec_id";
   $result_m = $dbfunc->query($sql_m);
   
   $j=1;
      while( $fetch_m= mysql_fetch_object($result_m)){
?>
  <tr>
    <!--td align="center" bgcolor="#999999"><? //echo $fetch_m->sec_id; ?></td-->
    <td align="center" bgcolor="#999999"><a title="<?php echo "คำอธิบายรายวิชา : ".$fetch_m->sec_des; ?>"><? echo $fetch_m->subject_name; ?></a></td>
    <td align="center" bgcolor="#999999" align="center">
    <a class="reg_popup" href="<?=$fetch_m->sec_id;?>" align="center">
    	<img src="images/category.png" width="15" height="15" border="0" />
    </a>
    </td>
  </tr>
<? }?> 
</table>
<style>
#plan_box,#reg_box{
	width: 900px;
	height: 500px;
	background: black;
	margin: 20px auto;
	opacity: 1;
	display: none;
	position: fixed; top: 10px; left:18%;
	z-index: 1000;
	border-radius: 15px;
        -moz-border-radius-topright: 15px;
        -webkit-border-top-right-radius: 15px;
	padding: 25px;
	border: #FFF solid 6px;
}
#plan_box > div ,#reg_box > div{	
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}
#plan_box > div > div, #reg_box > div > div{	
	display: inline-block;
	float: left;
}
ul#job-list > li{
	cursor: pointer;
	margin-top: 10px;
	color: green;
	list-style: inside;
}
.left{
	width: 500px;
}
.right{
	width: 350px;
}
#loading{
	background: url(images/loading.gif);
	z-index: 1000;
	position: fixed; top: 50%; left: 50%;
	display: none;
	width: 16px;
	height: 16px;
}
.close{
	background: url(images/close_icon.png);
	position: absolute; bottom: -20px; right: -30px;
	width: 45px; height: 45px;
	z-index: 10000;
	cursor: pointer;
	opacity: 1;
}
.close:hover{
	opacity: 0.8;
}

.plan_popup > img{
	opacity: 0.6;
}
.plan_popup > img:hover{
	opacity: 1;
}
.reg_popup > img{
	opacity: 0.6;
}
.reg_popup > img:hover{
	opacity: 1;
}
.delete,.edit{
    color: red;
    margin-left: 20px;
    opacity: 0.68;
}
.edit{
    color: yellow;
}
.delete:hover,.edit:hover{
    opacity: 1;
}
</style>
<div id="back_popup" style="display:none; width:100%; height: 100%; position: fixed; top: 0px; left: 0px; background:black; opacity:0.68; z-index:999;"></div>
<div id="loading"></div>
<div id="plan_box">
	<span class="close"></span>
	<div>
		<div class="left">
			<span id="sec_id"></span><br />
			<span id="sec_des"></span><br />
			<span id="teacher_name"></span><br />
			<span id="subject_name"></span><br />
			<ul id="select-list">
			
			</ul>
		</div>
		<div class="right">		
			<ul id="room-list"></ul>
		</div>
	</div>
</div>
<div id="reg_box">
	<span class="close"></span>
	<div>
		<div class="left">
			<span rel="sec_id"></span><br />
			<span rel="sec_des"></span><br />
			<span rel="teacher_name"></span><br />
			<span rel="subject_name"></span><br />			
                        <ul id="job-list"></ul>
		</div>
		<div class="right">
                    <h3 id="topic-form"></h3>
                    <form id="job_form" action="" method="post" enctype="multipart/form-data" target="iframe-post-form">
			<input type="hidden" name="sec_id" value="" />
                        ชื่องาน : <input type="text" name="job_name" /><br />
                        ไฟล์งาน : <input type="file" name="job_file" /><br />
                        กำหนดส่ง : <input type="text" name="job_date" readonly /> เวลา 
                        <select name="h" id="h">
                            <?php
                            for($i=0;$i<24;$i++){
                                echo '<option value="'.$i.'">'.$i.'</option>';
                            }
                            ?>
                        </select> : <select name="m" id="m">
                            <?php
                            for($i=0;$i<60;$i++){
                                echo '<option value="'.$i.'">'.$i.'</option>';
                            }
                            ?>
                        </select><br />
                        คะแนนเต็ม : <input type="text" name="job_scoretop" /><br />
                        รายละเอียดงาน : <textarea name="job_detail"></textarea><br />
                        <input type="submit" value="" id="submit-job" />
                    </form>
		</div>
	</div>
</div>
<script>
$(function(){
	var sec_id;
        var job_form = $('#job_form');
        var a;
	$("a.reg_popup").click(function(event){
		event.preventDefault();
                a = this;
		sec_id = $(this).attr('href');
                job_form.find('input[name=job_date]').datepicker({dateFormat:'yy-mm-dd'});
                job_form.find('input[name=sec_id]').val(sec_id);
                job_form.attr('action','ajax.php?module=admin&page=ajax_up_job');
                $('#topic-form').text('สั่งงาน');
                $('#submit-job').val('สั่งงาน');
                job_form.find('input[type!=submit][name!=sec_id],select,textarea').val('');
                
                job_form.iframePostForm({
                    json: true,
                    post: function(){
                        $('.close').click();
                    },
                    complete: function(response){
                        $(a).click();
                    }
                });
		$.ajax({
			url: "ajax.php",
			dataType: "json",
			type: "get",
			data: {sec_id: sec_id,module: 'admin',page: 'ajax_get_job'},
			success: function(data){
				var li;
				var input;
				var send_data;
				$("span[rel=sec_id]").html('รหัสชั้นเรียน : '+data.sec.sec_id);
				$("span[rel=sec_des]").html('คำอธิบายชั้นเรียน : '+data.sec.sec_des);
				$("span[rel=teacher_name]").html('ชื่ออาจารย์ผู้สอน : '+data.sec.teacher_name+' '+data.sec.teacher_surname);
				$("span[rel=subject_name]").html('ชื่อวิชาที่สอน : '+data.sec.subject_name);
				$("#job-list").html('');
				
				for(var i=0;i<data.job.length;i++){
                                    li = '<li job_id="'+data.job[i].job_id+'">'+data.job[i].job_name+'<span class="edit">o</span><span class="delete">x</span></li>';                                          
                                    $("#job-list").append(li);
				}
				$("#back_popup").fadeIn();
				$("#reg_box").fadeIn();
			}
		});
	});
	
	$("#job-list > li > span.delete").live('click',function(){						
		var job_id = $(this).parent().attr('job_id');
		$.ajax({
			url: "ajax.php",
			dataType: "json",
			type: "get",
			data: {
				job_id: job_id,
				module: 'admin',
				page: 'ajax_del_job'
			},
			beforeSend: function(){
				$('.close').click();
			},
			success: function(data){
				if(data.success){
					$(a).click();
				}
			}
		});
	});
	$("#job-list > li > span.edit").live('click',function(){
		var job_id = $(this).parent().attr('job_id');
		$.ajax({
			url: "ajax.php",
			dataType: "json",
			type: "get",
			data: {
				job_id: job_id,
				module: 'admin',
				page: 'ajax_get_job_one'
			},
			success: function(data){
				if(data.success){
					job_form.attr('action','ajax.php?module=admin&page=ajax_edit_job&job_id='+job_id);
                                        $('#topic-form').text('แก้ไขงาน');
                                        $('#submit-job').val('แก้ไขงาน');
                                        $('input[name=job_name]').val(data.job.job_name);
                                        $('input[name=job_detail]').val(data.job.job_detail);
                                        $('input[name=job_date]').val(data.job.date);
                                        $('input[name=job_topscore]').val(data.job.job_tob_score);
                                        
                                        $('select[name=h] > option').removeAttr('selected');
                                        $('select[name=h] > option[value='+data.job.h+']').attr('selected','selected');
                                        
                                        $('select[name=m] > option').removeAttr('selected');
                                        $('select[name=m] > option[value='+data.job.m+']').attr('selected','selected');
                                        
                                        $('input[name=job_scoretop]').val(data.job.job_scoretop);
                                        $('textarea[name=job_detail]').val(data.job.job_detail);
				}
			}
		});
                
	});
	$('.close').click(function(){
		$("#back_popup,#plan_box,#reg_box").fadeOut();
	});
	$(window.document).keyup(function(e){
		if(e.keyCode==27){
			$('.close').click();
		}
	});
        
        
});
</script>